<template>
  <div class="app-container">
    <el-dialog title="选择用户" :visible.sync="visibleInChild" :append-to-body="appendToBody" fullscreen
               :before-close="close">
               <div class="el-dialog-body-custom-height">
                <el-row :gutter="20">
                <!--部门数据-->
                <el-col :span="4" :xs="24">
                    <div class="head-container">
                    <el-input v-model="deptName" placeholder="请输入机构名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
                    </div>
                    <div class="head-container">
                    <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all @node-click="handleNodeClick" />
                    </div>
                </el-col>
                <!--用户数据-->
                <el-col :span="20" :xs="24">
                    <el-table v-loading="loading" border :data="userList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column label="帐号" align="center" prop="userName" :show-overflow-tooltip="true" />
                    <el-table-column label="姓名" align="center" prop="nickName" :show-overflow-tooltip="true" />
                    <el-table-column label="所属机构" align="center" prop="dept.deptName" :show-overflow-tooltip="true" />
                    <el-table-column label="手机号码" align="center" prop="phonenumber" width="120" />
                    </el-table>
                    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
                </el-col>
                </el-row>
               </div>
             <div slot="footer" class="dialog-footer">
                <el-button icon="el-icon-check" type="primary" @click="submitForm">确定</el-button>
            </div>
      </el-dialog>
  </div>
</template>

<script>
import {getList} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "User",
  components: { Treeselect },
  props: {
        visible: {
            type: Boolean,
            default: false
        },
        multipleSelect: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: ''
        },
        appendToBody: {
            type: Boolean,
            default: false
        }
    },
     computed: {
            visibleInChild: {
                get() {
                    return this.visible
                },
                set(val) {
                    this.$emit('update:visible', val)
                }
            }
        },
  data() {
    return {
    
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      users:[],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 部门树选项
      deptOptions: undefined,
      // 部门名称
      deptName: undefined,
      
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
 
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getList();
    this.getTreeselect() 
    

  },
  methods: {
    close() {
        this.visibleInChild = false;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      getList(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.getList();
    },
    
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.users=selection.map((item) => item);
    },
   
    /** 提交按钮 */
    submitForm: function () {
      if(!this.multipleSelect){
        if(this.users.length>1){
          this.msgError("只能选择一个用户");
          return; 
        }
      }
      if(this.users.length==0){
        this.msgError("请选择用户");
        return; 
      }
      this.$emit('selectUserFinished',this.users);
      this.visibleInChild = false;
    }
   
    
  },
};
</script>
<style>
.el-dialog .el-dialog-body-custom-height{
        height: calc(100vh - 214px);
}
</style>